<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-12 10:56:47
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:29
-->
<template>
  <!-- 游学项目开始 -->
  <div class="projects">
    <div class="wrapper">
      <div class="title">精选游学项目</div>
      <div
        class="project"
        v-for="item in articles"
        :key="item"
        @click="projectHandler(item.id)"
      >
        <div class="left">
          <img width="100%" :src="item.cover" alt="" />
        </div>
        <div class="right">
          <div class="name">{{ item.title }}</div>
          <div class="date">
            {{ item.publishTime | fmtDate }}
          </div>
          <div class="content">阅读次数：{{item.readTimes}}点赞次数：{{item.thumpUp}}</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 游学项目结束 -->
</template>
<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      // 向后台传递的参数
      list:{
        page:1,
        pageSize:10,
        categoryId:this.$route.query.categoryId,
      },
      articles:[]
    };
  },
  // 帧听器
  watch:{
    '$route.query.categoryId':function () {
      // 刷新页面
      this.list.categoryId = this.$route.query.categoryId;
      this.findArticleById()
    }
  },
  methods: {
    findArticleById(){
      get('/index/article/pageQuery',this.list).then(res => {
        if(res.status == 200){
          // console.log(res.data.list,'*********');
          this.articles = res.data.list

        }else{
          this.$message({
            type:'error',
            message:this.message
          })
        }
      })
    },
    // 跳转到项目的详情页
    projectHandler(id){
      this.$router.push({path:'/article',query:{id:id}})
    },
  },
  created() {
    this.findArticleById();
  },
};
</script>

<style scoped lang='scss'>
.project {
  display: flex;
  padding: 1em 0;
  border-bottom: 1px solid #f4f4f4;
  .left {
    width: 300px;
    height: 200px;
    background-color: #f4f4f4;
    border-radius: 5px;
    overflow: hidden;
  }
  .right {
    flex: 1;
    padding: 0 2em;
    .name {
      font-weight: bolder;
      font-size: 1em;
    }
    .date {
      margin: 1em 0;
    }
  }
}
</style>